<script setup lang="ts">
import Search from "_c/search/index.vue";

// import { date, QAvatar, QToggle, QBtn, QTooltip, QChip } from "quasar";
const { dialog, dark } = useQuasar();
// import Add from "./add.vue";

// const { t } = useI18n();

const router = useRouter();
const routes = router.options.routes;
console.log(routes);

const menu = [];

for (const temp of routes) {
  const { meta, children } = temp;
  if (meta?.hidden) continue;
  if (children && children.length > 0) {
    temp.children = [];
    for (const child of children) {
      const { meta: childMeta } = child;
      if (childMeta?.hidden) continue;
      temp.children.push(child);
    }
  }
  menu.push(temp);
}

const treeData = ref(menu);

//#region  列表 搜索
const search = ref("");
const handleSearch = () => {};
//#endregion

//#region treeData column

//#endregion

//#region 编辑用户信息和状态
const diaload = ref(false);
const commponent = shallowRef();
const dialoadProps = ref();

const add = () => {};
// const edit = (row: any) => {
//   console.log(row);
//   // diaload.value = true;
//   // commponent.value = Add;
//   // dialoadProps.value = row;
// };

const del = (row: any) => {
  console.log(row);
  dialog({
    title: "提示!",
    message: `确定要删除${row.name}吗？`,
    ok: {
      unelevated: true,
      color: "primary"
    },
    cancel: {
      outline: true,
      color: dark.isActive ? "white" : ""
    }
  }).onOk(() => {
    // const { code, msg } = await postDel({ id: item.id as number });
    // if (code === 0) {
    //   notify({
    //     message: "删除成功",
    //     type: "success"
    //   });
    //   handleSearch();
    // } else {
    //   notify({
    //     message: msg,
    //     type: "error"
    //   });
    // }
  });
};

//#endregion
</script>
<template>
  <q-page>
    <div class="row justify-between">
      <Search
        v-model="search"
        @handleSearch="handleSearch"
      ></Search>
      <!-- <q-btn unelevated color="primary" icon="add" :label="$t('pub.add')" @click.prevent="add" /> -->
    </div>

    <q-card
      bordered
      flat
      class="q-mt-md"
    >
      <q-card-section>
        <div
          class="row items-center"
          v-title
        >
          <div class="q-mt-xs">菜单列表</div>
          <q-space />

          <q-btn
            flat
            color="positive"
            round
            icon="add"
            @click.stop="add"
          >
            <q-tooltip>
              {{ $t("pub.add") }}
            </q-tooltip>
          </q-btn>
        </div>
      </q-card-section>
      <q-separator class="q-mt-sm" />
      <q-tree
        :nodes="treeData"
        node-key="name"
      >
        <template v-slot:default-header="{ node }">
          <div class="full-width">
            <div class="row items-center q-pt-sm">
              <div class="row q-mx-sm text-weight-medium">
                <!-- <q-btn @click="edit(prop.node)"></q-btn> -->
                <div>
                  <q-icon
                    size="12px"
                    :name="node.meta.icon"
                  ></q-icon>
                </div>

                <div class="q-ml-md">{{ $t(node.meta.title) }}</div>
                <div class="text-weight-light text-grey q-ml-sm">编号: {{ node.meta.id }}</div>
              </div>
              <q-space />

              <q-btn
                flat
                color="positive"
                round
                icon="add"
                @click.stop="del(node)"
              >
                <q-tooltip>
                  {{ $t("pub.add") }}
                </q-tooltip>
              </q-btn>
              <q-btn
                flat
                color="negative"
                round
                icon="fa-regular fa-trash-can"
                @click.stop="del(node)"
              >
                <q-tooltip>
                  {{ $t("pub.delete") }}
                </q-tooltip>
              </q-btn>
              <q-btn
                flat
                color="primary"
                round
                icon="fa-solid fa-pencil"
                @click.stop="del(node)"
              >
                <q-tooltip>
                  {{ $t("pub.edit") }}
                </q-tooltip>
              </q-btn>
            </div>
            <q-separator class="q-mt-sm" />
          </div>
        </template>
      </q-tree>
    </q-card>

    <q-dialog v-model="diaload">
      <component
        :is="commponent"
        v-model="diaload"
        :info="dialoadProps"
        @update="handleSearch"
      ></component>
    </q-dialog>
  </q-page>
</template>

<style scoped lang="scss"></style>
